<template>
  <div class="roomdiv">
    <h1>注册</h1>
    <el-card class="box-card">
      <div slot="header">
        <span>个人信息</span>
      </div>
      <el-form :model="form" :rules="rules" ref="ruleForm">


        <el-form-item label="真实姓名">
          <el-input v-model="form.realName" ></el-input>
        </el-form-item>

        <el-form-item label="用户名"  prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="生日" >
          <el-input v-model="form.birthdate"  autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="电话"  prop="phone">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="大学"  prop="collage">
          <el-input v-model="form.collage"></el-input>
        </el-form-item>
        <el-form-item label="专业"  prop="major">
          <el-input v-model="form.major"></el-input>
        </el-form-item>

        <el-form-item style="padding-left: 120px">
          <el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
          <el-button type="primary" @click="goToLogin">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  let pre = 'http://localhost:8888/user/getUserLogo?path='
  let url = 'http://localhost:8888/';
  export default {
    data() {
      var validatePhone = (rule, value, callback) => {
        if (value !== '' && !(/^1[3456789]\d{9}$/.test(value))) {
          callback(new Error('手机号格式不正确'));
        } else {
          callback();
        }
      };
      var validateEmail = (rule, value, callback) => {
        if (value !== '' && !(/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/).test(value)) {
          callback(new Error('邮箱格式不正确'));
        } else {
          callback();
        }
      };
      return {
        form: {},
        rules: {
          email: [
            {validator: validateEmail, trigger: 'blur'}
          ],
          phone: [
            {validator: validatePhone, trigger: 'blur'}
          ],
        },

      }
    },
    methods:{
      submitForm(formName) {
        // console.log(JSON.stringify(this.form))
        // this.$refs[formName].validate((valid) => {
        //   if (valid){
        //     this.$http
        //       .get(url + "user/updateUser", {params: {user: JSON.stringify(this.form)}})
        //       .then(result => {
        //         this.$message({
        //           type: 'success',
        //           message: '修改成功！！'
        //         });
        //       }, function () {
        //         this.$message({
        //           type: 'error',
        //           message: '修改失败！'
        //         });
        //       });
        //   } else {
        //     return false;
        //   }
        // });
      },
      goToLogin(){
        this.$router.push({name: "flogin"});
      }


    },
    mounted() {


    }
  }
</script>

<style scoped>

  .upload-demo{
    margin: 10px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: red;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: red;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    margin-left: 80px;

  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
    margin-left: 80px;
  }
  .favatar {
    position: absolute;
    width: 180px;
    margin: 6px;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .box-card {
    width: 1000px;
    margin: 8px auto;

  }
</style>
